Next.js × TypeScript × Jestのプロジェクトを作成する
環境構築するより早く開発に取り掛かりたいので適当に
一部、冗長な設定があると思うけど許容
手順
$ npx create-next-app .
$ touch tsconfig.json
$ npm run dev
ポートかぶってたら変更
code:js
"scripts": {
"dev": "next dev -p 3001",
もしくは nextコマンドで直接
$ next dev -p 3001
$ npm install -D typescript @types/react @types/react-dom @types/node
$ npm run dev
tsconfig.jsonが上書きされる
code:tsconfig.json
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
}
$ mkdir src && mv pages src && mv styles src
$ npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
eslint関連
$ npm install -D prettier eslint-config-prettier
prettier関連
eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with Prettier.
不必要 or Prettierと競合するeslintのルールを切る
.prettierrcを用意する
code:.prettierrc
{
"singleQuote": true,
"semi": false,
"trailingComma": "all"
}
NestJSに合わせようと思ったけど、セミコロンなしでやってみる
$ npm install -D eslint-plugin-react eslint-plugin-react-hooks
eslint x React関連
eslint-plugin-react
$ npm install -D eslint-plugin-import eslint-plugin-simple-import-sort
.eslintrc.jsを作成する
code:.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es6: true,
jest: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2020,
sourceType: 'module',
},
settings: {
'import/resolver': {
node: {
},
typescript: {
config: 'tsconfig.json',
alwaysTryTypes: true,
},
},
},
rules: {
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'react/self-closing-comp': [
'error',
{
component: true,
html: true,
},
],
// import-sort
'sort-imports': 'off',
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',
// use typescript-eslint no-unused-vars
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/indent': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'no-console': [
2,
{
},
],
},
}
ルール
react/self-closing-comp
子のないコンポーネントのときに、不必要な閉じタグをなくす
sort-imports、import/order
sort-imports
ESLint標準
import/orderと重複するため無効化
import/order
code:.vscode/settings.json
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
react/display-name
コンポーネントにdisplayNameを定義しないと怒る
@typescript-eslint/explicit-member-accessibility
アクセス修飾子を必須にする
privateとかpublicとか
no-unused-vers, @typescript-eslint/no-unused-vars
$ npm install -D jest ts-jest
Jest関連
code:jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)',
],
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
},
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
},
globals: {
'ts-jest': {
tsconfig: '<rootDir>/test/tsconfig.jest.json',
},
},
}
code:tsconfig.jest.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"jsx": "react"
}
}
.js -> .ts
任意
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-import-resolver-typescript
たぶん不要
supertest
tsconfig-paths
ts-loader
ts-node
eslint-plugin-prettier
refs